﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表单页面</title>
    <script src="/script/jquery.min.js"></script>
    <script src="/script/zui/js/zui.min.js"></script>
    <link href="/script/zui/css/zui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/script/zui/css/zui-theme.css">
    <link rel="stylesheet" href="/style/font/css/fontawesome.min.css">

    <link rel="stylesheet" href="/style/lib.css">

    <link rel="stylesheet" href="/style/global.css">

    <script src="/script/date/moment.js"></script>
    <script src="/script/art/template-web.js"></script>
    <script src="/script/art/template-web-ex.js"></script>
    <script src="/script/lib.js"></script>
</head>

<body>
    <div class="page-body">
        <!--搜索区域-->
        <div class="page-item page-search inline">
            <div class="form-inline">
                <div class="form-group">
                    <label>账号</label>
                    <input type="text" class="form-control" data-form="PhoneNumber" placeholder="登录账号">
                </div>
                <div class="form-group" data-search="date">
                    <div class="input-group width-320px">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control" data-form="CreateTimeString" readonly data-drp='{"t":2,"p":{"opens":"right"}}' placeholder="创建时间">
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" id="btn-search" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
                </div>
            </div>
        </div>
        <div class="page-item page-eidt-btns">
            <button class="btn btn-sm" data-btn-add="form.html"><i class="fa fa-plus"></i>添加</button>
            <!-- <button class="btn btn-sm" data-btn-eidt="form.html"><i class="fa fa-edit"></i>编辑</button> -->
            <button class="btn btn-danger btn-sm" id="btn-delete-all"><i class="fa fa-trash-o"></i>删除</button>
        </div>
        <div id="table_load" class="page-item page-data-list">
            <table id="table_data" class="table table-bordered table-hover"></table>
        </div>
        <div class="page-item page-data-page">
            <ul id="table_page" class="pager"></ul>
        </div>
    </div>
</body>


</html>
<!--双时间组件 如果不用就不需要引用-->
<link href="/script/drp/drp.css" rel="stylesheet" />
<script src="/script/drp/drp.js"></script>
<script src="/script/drp/drp-inti.js"></script>

<!--定义js模板-->
<!--语法网址 https://aui.github.io/art-template/zh-cn/docs/index.html-->
<script type="text/html" id="table_tp">
    <thead>
        <tr>
            <th class="checkboxs">
                <div class="checkbox-primary">
                    <input type="checkbox">
                    <label></label>
                </div>
            </th>
            <th>用户名称</th>
            <th>密码</th>
            <th>密码盐值</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {{each datas d}}
        <tr data-eidt="{{d.Id}}">
            <td class="checkboxs">
                <div class="checkbox-primary">
                    <input type="checkbox"><label></label>
                </div>
            </td>
            <td>{{d.Name}}</td>
            <td>{{d.Age}}</td>
            <td><label class="label label-danger">启用</label></td>
            <td>{{d.Sex}}</td>
            <td>{{d.CreateDate|to_date}}</td>
            <td>
                <button class="btn btn-mini btn-primary op-btn"><i class="icon icon-edit"></i></button>
                <button class="btn btn-mini btn-danger op-btn"><i class="icon icon-trash"></i></a>
            </td>
        </tr>
        {{/each}}
    </tbody>
</script>

<script type="text/javascript">
    $(function() {
        function _LoadData() {
            var parm = $(".page-search").getFormData();
            $("#table_data").ajaxPageTable("user/pageListData", parm);
        }
        //  _LoadData();
        //搜索按钮
        $("#btn-search").click(function() {
            _Load();
        })

        _LoadData();
    })
</script>